const { Content, Sider,Footer,Header } = Layout;
const {HashRouter  , Route, Link } = ReactRouterDOM;


class App extends React.Component {
    state = {
        collapsed: false,
    };
    onCollapse = (collapsed) => {
        this.setState({ collapsed });
    }
    render() {
        return (
            <HashRouter>
                <Layout style={{ minHeight: '100vh' }}>
                    <Sider
                        collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}
                    >
                        <div className="logo" />
                        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                            <Menu.Item key="api">
                                <Link to="/"><Icon type="api" theme="twoTone" />会员</Link>
                            </Menu.Item>
                            <Menu.Item key="session">
                                <Link to="/session"><Icon type="database" theme="twoTone"/>session</Link>
                            </Menu.Item>
                            <Menu.Item key="databasegroup">
                                <Link to="/databasegroup"><Icon type="folder" theme="twoTone"/>日志</Link>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Content style={{ margin: '0 16px' }}>
                            <div style={{ padding: 24, background: '#fff', height: "100%" }}>
                                <Route exact path="/" component={UserList} />
                                <Route path="/session" component={SessionList} />
                                <Route path="/databasegroup" component={UserList} />
                            </div>
                        </Content>
                    </Layout>
                </Layout>
            </HashRouter>
        );
    }F
}



ReactDOM.render(
    <App />
    ,
    document.getElementById('root')
);